<template>
    <div class="scroll-wrapper" ref="wrapper">
        <div class="scroll-content">
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
            <news-sub></news-sub>
        </div>
    </div>
</template>

<script>
//BetterScroll重点解决移动端（已支持 PC）各种滚动场景需求的插件
/**  BetterScroll初始化的时候必须传入一个节点，在该程序中传入的节点为
<div class="scroll-wrapper" ref="wrapper">*/
// <div class="scroll-content">这里面才是滚动区域的内容</div >
import BetterScroll from 'better-scroll';
import NewsSub from './News/Sub.vue';

export default {
    name: 'newsScrollWrapper',
    components: {
        NewsSub
    },
    mounted() {
        // 在组件挂载完毕时，BetterScroll才初始化
        this.scroll = new BetterScroll(this.$refs.wrapper);
    }
};
</script>

<style lang="scss" scoped>
@import '~styles/mixins.scss';

.scroll-content {
	@include flex-row;
	flex-wrap: wrap;
	background-color: #fff;
	border-bottom: 1px solid #ddd;
}
</style>
